<template>
  <div class="project-introduction">
    <el-card shadow="always" style="margin-bottom: 20px;">
      <h1 slot="header">项目介绍</h1>
      <p>以下是我们的系统功能介绍：</p>

      <!-- 实习管理 -->
      <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item title="实习管理" name="1">
          <ul>
            <li><strong>生产实习审核</strong>: 审核学生的生产实习申请。</li>
            <li><strong>生产实习过程管理</strong>: 管理和监控生产实习的过程。</li>
            <li><strong>生产实习成绩统计</strong>: 统计和分析生产实习的成绩。</li>
            <li><strong>顶岗实习审核</strong>: 审核学生的顶岗实习申请。</li>
            <li><strong>顶岗实习过程管理</strong>: 管理和监控顶岗实习的过程。</li>
            <li><strong>顶岗实习成绩统计</strong>: 统计和分析顶岗实习的成绩。</li>
          </ul>
        </el-collapse-item>

        <!-- 信息管理 -->
        <el-collapse-item title="信息管理" name="2">
          <ul>
            <li><strong>学生信息管理</strong>: 管理和维护学生的基本信息。</li>
            <li><strong>教师信息管理</strong>: 管理和维护教师的基本信息。</li>
            <li><strong>生产实习信息管理</strong>: 管理和维护生产实习的相关信息。</li>
            <li><strong>顶岗实习信息管理</strong>: 管理和维护顶岗实习的相关信息。</li>
          </ul>
        </el-collapse-item>

        <!-- 系统管理 -->
        <el-collapse-item title="系统管理" name="3">
          <ul>
            <li><strong>用户管理</strong>: 管理系统的用户信息。</li>
            <li><strong>菜单管理</strong>: 管理系统的菜单和权限。</li>
            <li><strong>角色信息管理</strong>: 管理系统的角色和权限分配。</li>
          </ul>
        </el-collapse-item>

        <!-- 顶岗实习 -->
        <el-collapse-item title="顶岗实习" name="4">
          <ul>
            <li><strong>顶岗实习申请</strong>: 提交和管理顶岗实习的申请。</li>
            <li><strong>我的顶岗实习</strong>: 查看和管理自己的顶岗实习记录。</li>
            <li><strong>我的成绩</strong>: 查看自己的实习成绩。</li>
            <li><strong>我的申请</strong>: 查看和管理自己的实习申请记录。</li>
          </ul>
        </el-collapse-item>

        <!-- 生产实习 -->
        <el-collapse-item title="生产实习" name="5">
          <ul>
            <li><strong>生产实习申请</strong>: 提交和管理生产实习的申请。</li>
            <li><strong>我的生产实习</strong>: 查看和管理自己的生产实习记录。</li>
            <li><strong>我的成绩</strong>: 查看自己的实习成绩。</li>
            <li><strong>我的申请</strong>: 查看和管理自己的实习申请记录。</li>
          </ul>
        </el-collapse-item>

        <!-- 分享 -->
        <el-collapse-item title="分享" name="6">
          <ul>
            <li><strong>信息审核</strong>: 审核和发布分享的信息。</li>
            <li><strong>我的分享</strong>: 查看和管理自己发布的分享信息。</li>
            <li><strong>讨论区</strong>: 参与和管理讨论区的内容。</li>
          </ul>
        </el-collapse-item>
      </el-collapse>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'ProjectIntroduction',
  data() {
    return {
      activeNames: ['1']
    };
  },
  methods: {
    handleChange(val) {
      console.log(val);
    }
  }
};
</script>

<style scoped>
.project-introduction {
  padding: 20px;
  font-family: Arial, sans-serif;
}

.el-collapse-item__content ul {
  list-style-type: none;
  padding-left: 0;
}

.el-collapse-item__content li {
  margin-bottom: 5px;
}
</style>



